import type { Metadata } from "next";
import Link from "next/link";
import { EventRow } from "@/components/market/event-row";
import { InstrumentTable } from "@/components/market/instrument-table";
import { Empty, Page, PageHeader, Section, Stat } from "@/components/ui/section";
import { StatusBadge } from "@/components/ui/status-badge";
import { api } from "@/lib/api";
import type { Breadth, Country, Exchange, ExchangeStatus, InstrumentWithQuote, MarketEvent } from "@/lib/types";

interface Detail {
  country: Country;
  exchanges: Array<Exchange & { status: ExchangeStatus }>;
  indices: InstrumentWithQuote[];
  rates: InstrumentWithQuote[];
  fx: InstrumentWithQuote[];
  equities: InstrumentWithQuote[];
  breadth: Breadth | null;
  events: MarketEvent[];
  instruments_tracked: number;
}

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ code: string }> }): Promise<Metadata> {
  const { code } = await params;
  try {
    const d = await api<Detail>(`/v1/countries/${encodeURIComponent(code)}`);
    return { title: `${d.country.name} — markets`, description: `${d.country.name}: exchanges, indices, rates, ${d.country.currency ?? "currency"} pairs and the equities Market Atlas observes.`, alternates: { canonical: `/countries/${d.country.code}` } };
  } catch {
    return { title: "Country" };
  }
}

export default async function CountryPage({ params }: { params: Promise<{ code: string }> }) {
  const { code } = await params;
  const d = await api<Detail>(`/v1/countries/${encodeURIComponent(code)}`);
  const c = d.country;
  const open = d.exchanges.filter((e) => e.status.state === "OPEN").length;
  return (
    <Page wide>
      <PageHeader
        kicker={
          <Link href="/countries" className="hover:text-ink">
            Countries · {c.region}
          </Link>
        }
        title={c.name}
        lead={`${c.currency ? `Currency ${c.currency} · ` : ""}${d.exchanges.length} venue${d.exchanges.length === 1 ? "" : "s"} in the atlas · ${d.instruments_tracked.toLocaleString("en-US")} instruments tracked.`}
      />
      <div className="grid grid-cols-2 gap-4 rounded-md border border-rule bg-surface px-4 py-4 sm:grid-cols-4">
        <Stat label="Venues open" value={`${open} / ${d.exchanges.length}`} />
        <Stat label="Indices" value={d.indices.length} sub="with canonical level" />
        <Stat label="Rates & yields" value={d.rates.length} sub="official series" />
        <Stat label="Equity breadth" value={d.breadth ? `${d.breadth.advancers} ▲ ${d.breadth.decliners} ▼` : "—"} sub={d.breadth ? `${d.breadth.instruments} quoted` : "no quoted equities"} />
      </div>
      <Section title="Exchanges" href="/exchanges">
        {d.exchanges.length ? (
          <ul className="grid grid-cols-1 [&>*]:min-w-0 gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {d.exchanges.map((e) => (
              <li key={e.id} className="rounded-md border border-rule bg-surface px-3 py-2.5">
                <Link href={`/exchanges/${e.id}`} className="font-medium hover:underline">
                  {e.name}
                </Link>
                <div className="mt-1 flex items-center gap-2 text-xs text-ink-3">
                  <StatusBadge status={e.status.state} /> <span className="mono">{e.status.localTime}</span> local · {e.mic ?? e.id}
                </div>
              </li>
            ))}
          </ul>
        ) : (
          <Empty>No venue of {c.name} is in the atlas yet.</Empty>
        )}
      </Section>
      {d.indices.length > 0 && (
        <Section title="Indices" href="/indices">
          <InstrumentTable rows={d.indices} compact showExchange={false} />
        </Section>
      )}
      <div className="grid grid-cols-1 [&>*]:min-w-0 gap-6 lg:grid-cols-2">
        <Section title="Rates & yields" href="/rates" hint="percent · official">
          <InstrumentTable rows={d.rates} compact showExchange={false} defaultSort="symbol" emptyText={`No official rate series for ${c.name} yet.`} />
        </Section>
        <Section title={`${c.currency ?? "Currency"} pairs`} href="/forex" hint="reference rates">
          <InstrumentTable rows={d.fx} compact showExchange={false} defaultSort="symbol" emptyText="No currency pairs yet." />
        </Section>
      </div>
      <Section title="Equities" href={`/stocks`} hint="most active among tracked names">
        <InstrumentTable rows={d.equities} compact emptyText={`No quoted equities for ${c.name} yet — the instrument master lists them but no source publishes their prices.`} />
      </Section>
      <Section title="Events">
        {d.events.length ? (
          <ul className="rounded-md border border-rule bg-surface px-3">
            {d.events.map((e) => (
              <EventRow key={e.id} e={e} />
            ))}
          </ul>
        ) : (
          <Empty>No events touching {c.name} instruments yet.</Empty>
        )}
      </Section>
    </Page>
  );
}